'use strict'

import React from 'react'
import { Button } from 'antd'
import './index.less'

class indexGuide extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      setupIndex: 1,
    }
  }

  componentDidMount() {
    // 设置遮罩大小
    document.getElementById(
      'guide-contianer',
    ).style.width = `${document.body.clientWidth}px`
    document.getElementById(
      'guide-contianer',
    ).style.height = `${document.body.clientHeight}px`
    document.getElementById('guide-contianer').style.backgroundColor = '#000000'
    document.getElementById('guide-contianer').style.opacity = '0.7'

    // 窗口大小变化后重设置大小
    window.addEventListener('resize', this.change)
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.change)
  }

  change = () => {
    document.getElementById(
      'guide-contianer',
    ).style.width = `${document.body.clientWidth}px`
    document.getElementById(
      'guide-contianer',
    ).style.height = `${document.body.clientHeight}px`
  };

  render() {
    const { setupIndex } = this.state
    const { nodeType } = this.props
    return (
      <div id="guide-contianer">
        <div
          className={`guide-first guid-select ${
            nodeType == 9 || nodeType == 10 ? 'guide-first-1' : ''
          }`}
        >
          <i className="iconfont_new iconsuo" />
          <span>解锁</span>
        </div>
        <div
          className={`guide-tips ${
            nodeType == 9 || nodeType == 10 ? 'guide-tips-1' : ''
          }`}
        >
          <Button
            style={{
              backgroundColor: '#000000',
              color: '#ffffff',
              float: 'left',
              left: '45%',
              top: '85%',
              fontSize: '14px',
            }}
            onClick={() => {
              this.props.showGuideChange()
            }}
          >
            我知道了
          </Button>
          {(() => {
            switch (setupIndex) {
              case 1:
                return <p>点击这里开启编辑状态</p>
              default:
                return null
            }
          })()}
        </div>
      </div>
    )
  }
}

export default indexGuide
